<!-- 套餐购买页面 -->
<template>
  <LoadingGroup :pending="pending" :error="error" :isEmpty="rows.length === 0">
    <div class="p-3">
      <div class="plan-to-buy">
        <div class="have-bought">
          <h1 style="font-weight: 600; font-size: 20px">已购买套餐</h1>
          <div class="package-name" v-for="item in okData">
            <div class="package-name-left">
              <div class="ft20">
                套餐名称：<span>{{ item.name }}</span>
              </div>
              <div class="ft20">
                套餐说明：<span>{{ item.explain }}</span>
              </div>
            </div>
            <div class="package-name-right">
              <n-button type="info" class="add">购买</n-button>
            </div>
          </div>
        </div>

        <div class="have-not">
          <h1 style="font-weight: 600; font-size: 20px">未购买套餐</h1>
          <div class="package-name" v-for="item in noData">
            <div class="package-name-left">
              <div class="ft20">
                套餐名称：<span>{{ item.name }}</span>
              </div>
              <div class="ft20">
                套餐说明：<span>{{ item.explain }}</span>
              </div>
            </div>
            <div class="package-name-right">
              <n-button type="info" class="add">购买</n-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </LoadingGroup>
</template>

<script setup>
import { NButton } from "naive-ui";
import { reactive, ref } from "vue";
useHead({ title: "套餐购买" });

const table = reactive({
  okData: [
    {
      name: "肯德基",
      explain: "可乐，鸡翅，鸡肉卷",
    },
  ],
  noData: [
    {
      name: "111",
      explain: "11",
    },
    {
      name: "22",
      explain: "222",
    },
  ],
});
const { okData, noData } = toRefs(table);

const { page, limit, pending, error, rows, total, refresh, handlePageChange } =
  await usePage(({ page, limit }) => useMypostListApi(page));

const handleDeleteItem = async ({ id, success, fail }) => {
  let { error } = await useDeletePostApi(id);
  if (error.value) {
    fail();
  } else {
    success();
    refresh();
  }
};

const rowProps = (row) => {
  return {
    style: "cursor: pointer;",
    onClick: () => {
      message.info(row.name);
    },
  };
};
</script>
<style lang="scss" scoped>
.plan-to-buy {
  padding: 10px;
  .package-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    height: 130px;
    margin: 20px 0;
    margin-right: 30px;
    padding: 0 30px;
    .package-name-left {
      display: flex;
      flex-direction: column;
      .ft20 {
        font-size: 20px;
      }
    }
    .package-name-right {
      :deep(.n-button) {
        width: 100px;
      }
    }
  }
}
</style>
